import { Case, SwitchCase } from 'components/switch'
import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import EditPolygon from './editPolygon'
import EditRectangle from './editRectangle'
import EditKeyPoint from './editKeypoint'

const EditContainerView = ({
  editLabel,
  scale,
  classes,
}) => {
  return (
    <Container>
      {
        editLabel
        && (
          <SwitchCase switchValue={classes[editLabel.class_id].type}>
            <Case
              value="rectangle"
              render={() => (
                <EditRectangle
                  label={editLabel}
                  color={classes[editLabel.class_id].color}
                  scale={scale}
                />
              )}
            />
            <Case
              value="polygon"
              render={() => (
                <EditPolygon
                  label={editLabel}
                  color={classes[editLabel.class_id].color}
                />
              )}
            />
            <Case
              value="keypoint"
              render={() => (
                <EditKeyPoint
                  label={editLabel}
                  color={classes[editLabel.class_id].color}
                  setting={classes[editLabel.class_id].setting}
                  scale={scale}
                />
              )}
            />
          </SwitchCase>
        )
      }
    </Container>
  )
}

EditContainerView.propTypes = {
  scale: PropTypes.number.isRequired,
  editLabel: PropTypes.object,
  classes: PropTypes.object.isRequired,
}

EditContainerView.defaultProps = {
  editLabel: undefined,
}

const mapStateToProps = state => ({
  classes: projectDuck.selectors.classes(state),
  editLabel: projectDuck.selectors.editLabel(state),
})

export default withPixiApp(connect(mapStateToProps)(EditContainerView))
